<template>
  <div>
    <h1>产品列表</h1>
    <div>
      <input type="button" value="价格" @click="sort" /> |
      价格区间:
      <input type="text" v-model="min" /> -
      <input type="text" v-model="max" />
      <input type="button" value="确定" @click="search" />
    </div>

    <div>
      <div v-for="goods in goods_list" :key="goods.id" style="border-bottom:1px solid gray">
        <img :src="goods.img" style="width:100px;" />
        <span>{{goods.name}}</span>
        <span>{{goods.go_date}}</span>
        <span>{{goods.price}}</span>
        <span>满意么:{{goods.nice}}%</span>
        <span>{{goods.sale}}人已出游</span>
        <span>{{goods.comments}}人点评</span>
        <input type="button" value="提交订单" @click="push(goods.id)" />
        <router-link :to="{'path':'/comment5','query':{'id':goods.id}}">评论</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goods_list: [],
      min: "",
      max: "",
      flag:1,
    };
  },
  methods: {
    sort() {
        this.axios.get("/filter?sort="+this.flag).then(resp => {
        console.log(resp.data);
        this.goods_list = resp.data;
        });
        if(this.flag==1){
            this.flag=0
        }else{
            this.flag=1
        }
    },
    search() {
         this.axios.get("/filter",{"params":{"min":this.min,"max":this.max}}).then(resp => {
        console.log(resp.data);
        this.goods_list = resp.data;
        });
    },
    push(gid) {
        this.axios.post("/order",{"goods":gid}).then(resp=>{
            console.log(resp.data)
        }).catch(error=>{
            console.log(error)
        })
    }
  },
  created() {
    this.axios.get("/goods").then(resp => {
      console.log(resp.data);
      this.goods_list = resp.data;
    });
  }
};
</script>

<style>
</style>